@import "http://webfonts.ru/import/notcourier.css";
@import url('https://fonts.googleapis.com/css?family=Lato:100,100i,200,400,900');

/*any viewPort/window less than ***px wil revert to this*/
@media (max-width: 850px) {
 .overlay .overlay-content a {

    font-size: 1em;
  }

}

@media (max-width: 550px) {
 .overlay .overlay-content a {
    font-size: 1em;
  }

}

@media (max-width: 400px) {
 .overlay .overlay-content a {

    font-size: 1em;
  }

}

/*any screen larger than this is fixed at */
@media (min-width: 850px) {
   .overlay .overlay-content a {

     font-size: 1.00em;
   }

}

@media screen and (max-height: 450px) {
  .overlay {overflow-y: auto;}
  .overlay a {font-size: 1em}
  .overlay .closebtn {

    top: 15px;
    right: 0px;
  }
}



.overlay {
    height: 100%;
    width: 0%;
    position: fixed;
    /*ensure when menu is on top links below cant be shown/pressed*/
    z-index: 100;
    top: 0;
    left: 0;
    border: 0px solid blue;

    background-color: rgba(0,0,0, 0.95);
    overflow-y: scroll;
    /*only have transition on width attribute*/
    transition:  width 0.5s;
    opacity: 1;
}

.overlay-content {
    position: relative;
    top: 10%;
    width: 100%;
    /*font-family: 'NotCourierSans';*/
    font-family: 'notcouriersansregular', sans-serif;
    font-weight: 600;
    text-transform:uppercase;

    text-align: center;
    margin-top: 30px;

}

.overlay a {
    padding: 0px;
    text-decoration: none;
    font-size: 1.0em;
    color: #ccc;
    display: block;
    transition: width 0.3s;
}

.overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
    color: #849368;
}

.overlay .closebtn {
  width: 40px;
  height:40px;
  position: absolute;
  left: 5vw;
  top: 20px;

  background-image: url("../images/menu/menux.png");
  background-size: 40px 40px;
  background-size:contain;

  border: 0px solid blue;
}

.openbtn{
  /*transition speed when openNav in js is called*/
  padding: 0px;
  margin: 0px;
  transition: 1.0s;
  margin-left: 0;
  width: 40px;
  height:40px;
  position: absolute;

  top: 0px;
  border: 0px solid yellow;

  background-size: 40px 40px;
  background-size: contain;
}

.openbtn img {
/*span.openbtn{*/

  cursor:pointer;
  background-color: rgba(0,0,0, 0.0);
  width: inherit;
  height: inherit;

  border: 0px solid blue;

}